@import "../../../../../common/colors.scss";
@import "../../../../../mixins/utils.scss";
@import "../../../common/var.scss";

@include theme($theme){
    .bar{
        display: flex !important;
        background-color: $sidebar-background;
        background-image: linear-gradient(to right, $sidebar-background , $blue600);
        height: $sidebar-height;
        line-height: $sidebar-height;
        color:$white;
        .bar-right{
            flex: 1;
            width: 100%;
            height: 100%;
            display: inline-block;
             //左边菜单展开关闭
            & .collapse{
                display: inline-block;
                width: calc(#{$sidebar-height} - 0.2rem);
                height: $sidebar-height;
                text-align: center;
                cursor: pointer;
                margin-left:0px;
                &:hover{
                    background-color: $blue600;
                    transition: background-color 1s linear;
                    -webkit-transition: background-color 1s linear;
                    -moz-transition: background-color 1s linear;
                    -o-transition: background-color 1s linear;	
                }
            }

            //用户信息
            & .userinfo{
                float:right;
                margin: 0;
                padding: 0 4px;
                -webkit-user-select:none;
                -moz-user-select:none;
                -ms-user-select:none;
                user-select:none;
                & .userinfo-inner {
                    cursor: pointer;
                    color: $white;
                    img {
                        width: calc(#{$nav-bar} - 0.4rem);
                        height: calc(#{$nav-bar} - 0.4rem);
                        border-radius: 20px;
                        margin: 4px 0px 0px 10px;
                        float: right;
                    }
                }
                &:hover{
                    background-color: $blue500;
                    transition: background-color 1s linear;
                    -webkit-transition: background-color 1s linear;
                    -moz-transition: background-color 1s linear;
                    -o-transition: background-color 1s linear;	
                }
            }

            & .theme-icons{
                display: inline-block;
                float: right;
                color: $white;
            }
            
            & .theme-icon{
                -webkit-user-select:none;
                -moz-user-select:none;
                -ms-user-select:none;
                user-select:none;
                display: inline-block;
                float: right;
                margin:0 8px 0 6px;
                cursor: pointer;
                .fa-ellipsis-v{
                    font-size: 20px;
                }
                .fa-arrows-alt{
                    font-weight: lighter;
                    font-size: 20px;
                }
                .fa-language{
                    font-weight: lighter;
                    font-size: 20px;
                }
            }
            
            & .theme-select{
                float:right;
                width: 100px;
                margin-right: 6px;
            }
        }
       
    }
}
